<template>
	<div class="siteManage">
		<div class="crumbs">
			<header class="crumbs_arr_box">
				<span>应用管理</span>
			</header>
		</div>
		<div class="card_table">
			<!-- 表格头部控件 -->
			<header>
				<!-- 左侧查询控件 -->
				<span>
          <!-- multiple -->
          <el-select
						v-model="table_config.mngDeptId"
						class="sel_head"
						size="small"
						filterable
						clearable
						placeholder="请选择运营部门"
					>
            <el-option
							v-for="item in org_list"
							:key="item.orgCode"
							:label="item.orgName"
							:value="item.orgCode"
						></el-option>
          </el-select>
          <el-input
						v-model="table_config.appName"
						size="small"
						clearable
						class="sel_inp"
						placeholder="请输入内容"
					>
            <template slot="prepend">应用名称</template>
            <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </span>
				<!-- 右侧追加控件 -->
				<span>
          <!-- <el-radio v-model="table_size" label="mini">迷你</el-radio>
          <el-radio v-model="table_size" label="small">适中</el-radio>
          <el-radio v-model="table_size" label="medium">大屏</el-radio>-->
          <el-button v-if="$currentRole>2" type="primary" @click="show_form({}, false)" plain size="mini">添加应用</el-button>
        </span>
			</header>
			<!-- 表体区域 -->
			<section
				:style="{
        }"
			>
				<el-table
					v-loading="table_loading"
					:size="table_size"
					:data="tableData"
					style="width: 100%"
				>
					<el-table-column prop="appId" label="应用标识" width="100"></el-table-column>
					<el-table-column prop="appName" label="应用名称" width="100"></el-table-column>
					<!-- <el-table-column prop="productCode" label="应用厂商" width="100">
            <template slot-scope="scope">
              {{
              scope.row.productCode == "wz"
              ? "网舟"
              : scope.row.productCode == "jg"
              ? "极光"
              : "未知"
              }}
            </template>
          </el-table-column> -->
					<el-table-column prop="appType" label="应用类型" width="120">
						<template slot-scope="scope">
							{{
							type_change(scope.row.appType)
							}}
						</template>
					</el-table-column>
					<el-table-column prop="appDescribe" label="应用描述" width="180"></el-table-column>
					<el-table-column prop="officialAddress" min-width="200" label="分析平台数据接受正式地址"></el-table-column>
					<el-table-column prop="appId" label="应用编码" width="160"></el-table-column>
					<el-table-column prop="orgName" label="运营部门" sortable width="160"></el-table-column>
					<el-table-column prop="createTime" label="创建时间" sortable width="120">
						<template slot-scope="scope">
							{{
							time_change(scope.row.createTime)
							}}
						</template>
					</el-table-column>
					<el-table-column prop="updateTime" label="修改时间" sortable width="120">
						<template slot-scope="scope">
							{{
							time_change(scope.row.updateTime)
							}}
						</template>
					</el-table-column>
					<el-table-column label="操作" v-if="$currentRole>2" width="100">
						<template slot-scope="scope">
							<el-button @click="show_form(scope.row, true)" plain size="mini" type="text">编辑
							</el-button>
							<el-button @click="del_table_sure(scope.row)" plain size="mini" type="text">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</section>
			<!-- 分页控件 -->
			<footer>
				<el-pagination
					:current-page="table_config.currentPage"
					@size-change="handleSizeChange"
					@current-change="current_change"
					:page-sizes="[5, 10, 30, 50, 100]"
					:page-size="table_config.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total_page"
				></el-pagination>
			</footer>
		</div>
		<!-- 抽屉区域 -->
		<el-drawer title="添加应用" :modal="false" :visible.sync="drawer_bool" :with-header="false">
			<div class="drawer_box">
				<header>
          <span class="til">
            <template v-if="addEdit">编辑应用(ID:{{ drawer_obj.appId }})</template>
            <template v-else>添加应用</template>
          </span>
					<i @click="drawer_bool = false" class="el-icon-close"></i>
				</header>
				<section>
					<el-form
						:inline-message="true"
						:model="drawer_obj"
						:rules="formRules"
						ref="ruleForm"
						class="sectionForm"
					>
						<el-form-item ref="fromAppId" prop="appId">
							<div class="section_til">
								<i>*</i>
								应用编码 ( 必填 )</div>
							<div class="el_com">
								<el-input
									class="el_inp lang"
									:size="table_size"
									v-model="drawer_obj.appId"
									autocomplete="off"
								></el-input>
							</div>
						</el-form-item>
						<el-form-item ref="fromName" prop="name">
							<div class="section_til">
								<i>*</i>
								应用名称 ( 必填 )</div>
							<div class="el_com">
								<el-input
									class="el_inp lang"
									:size="table_size"
									v-model="drawer_obj.appName"
									autocomplete="off"
								></el-input>
							</div>
						</el-form-item>
						<el-form-item>
							<div class="section_til">应用简称</div>
							<div class="el_com">
								<el-input
									class="el_inp lang"
									:size="table_size"
									v-model="drawer_obj.appShortName"
									autocomplete="off"
								></el-input>
							</div>
						</el-form-item>
						<el-form-item ref="fromType" prop="type">
							<div class="section_til"><i>*</i>应用类型( 必填 )</div>
							<div class="el_com">
								<el-select
									:disabled="addEdit"
									v-model="drawer_obj.appType"
									:size="table_size"
									clearable
									class="el_inp"
									placeholder="请选择"
								>
									<el-option
										v-for="item in appTypeArr"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</div>
						</el-form-item>
						<el-form-item ref="fromSdk" prop="sdk">
							<div class="section_til"><i>*</i>默认SDK产品编码( 必填 )</div>
							<div class="el_com">
								<el-select
									v-model="drawer_obj.productCode"
									:size="table_size"
									clearable
									class="el_inp"
									placeholder="请选择"
								>
									<el-option
										v-for="item in sdkTypeArr"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</div>
						</el-form-item>
						<el-form-item ref="fromDep" prop="dep">
							<div class="section_til"><i>*</i>运营部门( 必填 )</div>
							<div class="el_com">
								<el-select
									v-model="drawer_obj.mngDeptId"
									filterable
									clearable
									placeholder="请选择运营部门"
									:size="table_size"
									class="el_inp"
								>
									<el-option
										v-for="item in org_list"
										:key="item.orgCode"
										:label="item.orgName"
										:value="item.orgCode"
									></el-option>
								</el-select>
							</div>
						</el-form-item>
						<el-form-item>
							<div class="section_til">分析平台数据接受正式地址</div>
							<div class="el_com">
								<el-input
									clearable
									v-model="drawer_obj.officialAddress"
									:size="table_size"
									class="el_inp lang"
									placeholder="请输入内容"
								></el-input>
							</div>
						</el-form-item>
						<el-form-item>
							<div class="section_til">分析平台数据接受测试地址</div>
							<div class="el_com">
								<el-input
									clearable
									v-model="drawer_obj.testAddress"
									:size="table_size"
									class="el_inp lang"
									placeholder="请输入内容"
								></el-input>
							</div>
						</el-form-item>
						<el-form-item>
							<div class="section_til">描述</div>
							<div class="el_com">
								<el-input
									v-model="drawer_obj.appDescribe"
									:size="table_size"
									class="el_inp lang"
									type="textarea"
									:rows="3"
									placeholder="请输入内容"
								></el-input>
							</div>
						</el-form-item>
					</el-form>
				</section>
				<footer>
					<!-- 编辑打开抽屉时，调用的函数 -->
					<template v-if="type_add_edit && !drawer_loading">
						<el-button class="btn" @click="edit_app" size="mini" type="primary">保存</el-button>
					</template>
					<!-- 添加打开抽屉时，调用的函数 -->
					<template v-if="!type_add_edit && !drawer_loading">
						<el-button class="btn" @click="add_app" size="mini" type="primary">保存</el-button>
					</template>
					<template v-if="drawer_loading">
						<el-button class="btn" disabled size="mini" type="primary">递交中</el-button>
					</template>
					<el-button class="btn" @click="drawer_bool = false" size="mini" type="primary" plain>取消</el-button>
				</footer>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import application from "@/utils/api/application.js";
	export default {
		name: "siteManage", // 应用管理
		watch: {
			drawer_bool: {
				handler() {
					this.clearRules();
				},
				deep: true
			},
		},
		data() {
			let validateName = (rule, value, callback) => {
				if (
					!this.drawer_obj.appName ||
					this.drawer_obj.appName == "" ||
					this.drawer_obj.appName == null
				) {
					callback(new Error("应用名称不能为空"));
				}
				callback();
			};
			let validateAppId = (rule, value, callback) => {
				if (
					!this.drawer_obj.appId ||
					this.drawer_obj.appId == "" ||
					this.drawer_obj.appId == null
				) {
					callback(new Error("以字母开头，且只能包含数字 字母 下划线"));
				}
				callback();
			};
			let validateType = (rule, value, callback) => {
				if (
					!this.drawer_obj.appType ||
					this.drawer_obj.appType == "" ||
					this.drawer_obj.appType == null
				) {
					callback(new Error("应用类型不能为空"));
				}
				callback();
			};
			let validateSdk = (rule, value, callback) => {
				if (
					!this.drawer_obj.productCode ||
					this.drawer_obj.productCode == "" ||
					this.drawer_obj.productCode == null
				) {
					callback(new Error("请选择SDK产品编码"));
				}
				callback();
			};
			let validateDep = (rule, value, callback) => {
				if (
					!this.drawer_obj.mngDeptId ||
					this.drawer_obj.mngDeptId == "" ||
					this.drawer_obj.mngDeptId == null
				) {
					callback(new Error("请选择运营部门"));
				}
				callback();
			};
			return {
				appTypeArr: [
					{
						value: 1,
						label: "客户端"
					},
					{
						value: 2,
						label: "Web"
					},
					{
						value: 3,
						label: "小程序"
					}
				],
				sdkTypeArr: [
					// {
					//   value: "wz",
					//   label: "网舟"
					// },
					// {
					//   value: "jg",
					//   label: "极光"
					// },
					{
						value: "dx",
						label: "电信"
					}
				],
				table_loading: false,
				drawer_loading: false,
				total_page: 0, // 表格数据总量
				type_add_edit: false, // 判断是调取添加接口，还是调取编辑接口
				org_list: [], // 运营部门存储数组
				formRules: {
					appId: [{ validator: validateAppId, trigger: "blur" }],
					name: [{ validator: validateName, trigger: "blur" }],
					type: [{ validator: validateType, trigger: "change" }],
					sdk: [{ validator: validateSdk, trigger: "change" }],
					dep: [{ validator: validateDep, trigger: "change" }],
				}, // 弹框表单验证规则
				drawer_obj: {
					id: null,
					appId: null,
					appName: null,
					productCode: null, // 厂商插码
					appShortName: null,
					appType: null,
					orgName: null,
					officialAddress: null,
					testAddress: null,
					appDescribe: null,
					mngDeptId: null
				}, // 抽屉弹窗存储大对象
				addEdit:false,
				table_config: {
					mngDeptId: null, // 运营部门
					appName: null, // 应用名称
					currentPage: 1,
					pageSize: 10
				}, // 表格查询大对象
				tableData: [], //  表格数据
				table_size: "small", //  表格尺寸变量
				drawer_bool: false //  抽屉开关变量
			};
		},
		methods: {
			// 表格删除确认函数
			del_table_sure(obj) {
				this.$confirm("此操作为逻辑删除, 是否继续?", "提示", {
					confirmButtonText: "继续",
					cancelButtonText: "取消",
					type: "warning"
				})
					.then(() => {
						this.del_table(obj);
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},
			async del_table(obj) {
				// 判断当前表格是否只剩下一条数据
				let len = this.tableData.length;
				let res = await application.app_delete({
					id: obj.id
				});
				if (res&&res.success) {
					this.$message({
						message: "删除成功",
						type: "success"
					});
					if (len == 1 && this.table_config.currentPage > 1) {
						this.table_config.currentPage--;
					}
					this.query();
				} else {
					this.$message.error("删除失败");
				}
			},
			// 查询函数
			search() {
				this.table_config.currentPage = 1;
				this.query();
			},
			// 分页数量改变函数
			handleSizeChange(page) {
				this.table_config.pageSize = page;
				this.table_config.currentPage = 1;
				this.query();
			},
			// 页码切换函数
			current_change(page) {
				this.table_config.currentPage = page;
				this.query();
			},
			show_form(obj, bool) {
				if (bool) {
					this.type_add_edit = true;
					this.drawer_obj = {
						id: obj.id,
						productCode: obj.productCode,
						appId: obj.appId,
						appName: obj.appName,
						appShortName: obj.appShortName,
						appType: obj.appType,
						orgName: obj.orgName,
						officialAddress: obj.officialAddress,
						testAddress: obj.testAddress,
						appDescribe: obj.appDescribe,
						mngDeptId: obj.mngDeptId
					};
					this.addEdit = true;
				} else {
					this.type_add_edit = false;
					this.drawer_obj = {
						appId: null,
						appName: null,
						productCode: null,
						appShortName: null,
						appType: null,
						orgName: null,
						officialAddress: null,
						testAddress: null,
						appDescribe: null,
						mngDeptId: null
					};
					this.addEdit = false;
				}
				this.drawer_bool = true;
			},
			// 时间戳转换函数
			time_change(time) {
				let date = new Date(time); //获取一个时间对象
				let year = date.getFullYear(); // 获取完整的年份(4位,1970)
				let mon = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
				mon = mon < 10 ? "0" + mon : mon;
				let day = date.getDate(); // 获取日(1-31)
				day = day < 10 ? "0" + day : day;
				return year + " - " + mon + " - " + day;
			},
			// 应用类型转化函数
			type_change(type) {
				let str = null;
				switch (type) {
					case 1:
						str = "客户端";
						break;
					case 2:
						str = "Web";
						break;
					case 3:
						str = "小程序";
						break;
					default:
						str = "未知";
				}
				return str;
			},
			// 数据请求函数
			async query() {
				this.table_loading = true;
				setTimeout(() => {
					if (this.table_loading) {
						this.table_loading = false;
					}
				}, 6000);
				let res = await application.app_list(this.table_config);
				setTimeout(() => {
					this.table_loading = false;
				}, 200);
				if (res&&res.success) {
					this.total_page = res.value.total;
					this.table_config.currentPage = res.value.currentPage;
					this.table_config.pageSize = res.value.pageSize;
					this.tableData = res.value.list;
				} else {
					this.total_page = 0;
					this.table_config.currentPage = 1;
					this.table_config.pageSize = 10;
					this.tableData = [];
				}
			},
			// 消除校验提示文字
			clearRules(){
				try{
					this.$refs.fromName.clearValidate();
					this.$refs.fromType.clearValidate();
					this.$refs.fromSdk.clearValidate();
					this.$refs.fromDep.clearValidate();
				}catch(err){
					console.log(err,'校验消除失败')
				}
			},
			// 表单校验函数
			formRulesChecking(obj){
				let bool = true;

				if(!obj.appName){
					bool = false;
				}
				if(!obj.appType){
					bool = false;
				}
				if(!obj.productCode){
					bool = false;
				}
				if(!obj.mngDeptId){
					bool = false;
				}

				return bool
			},
			// 编辑应用
			async edit_app() {
				if(!this.formRulesChecking(this.drawer_obj)){
					return
				}
				this.drawer_loading = true;
				let res = await application.app_edit(this.drawer_obj);
				this.drawer_loading = false;
				if (res&&res.success) {
					this.$message({
						message: "修改成功",
						type: "success"
					});
					this.query();
				} else {
					this.$message.error("修改失败");
				}
				this.drawer_bool = false;
			},
			// 添加应用
			async add_app() {
				if(!this.formRulesChecking(this.drawer_obj)){
					return
				}
				this.drawer_loading = true;
				let res = await application.app_add(this.drawer_obj);
				this.drawer_loading = false;
				if (res&&res.success) {
					this.table_config.currentPage = 1;
					this.$message({
						message: "添加成功",
						type: "success"
					});
					this.query();
				} else {
					this.$message.error("添加失败");
				}
				this.drawer_bool = false;
			}
		},
		async created() {
			this.query();
			let res = await application.app_orgList({});
			if (res&&res.success) {
				this.org_list = res.value.list;
			}
		},
		components: {},
		computed: {}
	};
</script>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}
	::v-deep .el-form-item__error {
		position: absolute;
		left: 71%;
		bottom: 0.3rem;
	}
	// 抽屉壳子元素
	.drawer_box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;
		header {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
			padding: 0 20px 0 10px;
			border-bottom: 1px solid #e4e7ed;
			.til {
				font-family: "Helvetica Neue", Helvetica, "PingFang SC",
				"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
				font-size: 14px;
				font-weight: 600;
				color: rgba($color: #303133, $alpha: 1);
			}
			i {
				font-size: 16px;
				font-weight: 600;
				transition: all 0.5s ease;
			}
			i:hover {
				transform: rotate(90deg);
				font-size: 20px;
				font-weight: 800 !important;
			}
		}
		section::-webkit-scrollbar {
			display: none;
		}
		section {
			position: absolute;
			left: 0;
			right: 0;
			top: 60px;
			bottom: 66px;
			padding: 0 0 30px;
			overflow-y: scroll;
			.sectionForm {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-direction: column;
				.el-form-item {
					width: 100%;
					margin-bottom: 0;
				}
			}
			.section_til {
				width: 100%;
				text-indent: 20px;
				height: 26px;
				line-height: 26px;
				text-align: left;
				color: #909399;
				font-size: 12px;
				i{
					color: red;
					font-size: 16px;
					font-weight: 600;
					margin: 0 .1rem 0 0 ;
				}
			}
			.el_com {
				width: 100%;
				padding: 6px 0 6px 30px;
				min-height: 0.8rem;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				position: relative;
				.el_inp {
					width: 70%;
				}
			}
		}
		footer {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 58px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 0;
			border-top: 1px solid #e4e7ed;
			.btn {
				margin: 0 20px;
			}
		}
	}
	.siteManage::-webkit-scrollbar {
		display: none;
	}
	.siteManage {
		width: 98%;
		margin: 0 auto;
		height: 98.6%;
		overflow-y: scroll;
		.card_table {
			width: 99%;
			margin: 10px auto 10px;
			padding-bottom: 36px;
			position: relative;
			header {
				width: 99%;
				margin: 0 auto;
				box-sizing: border-box;
				height: 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.sel_head {
					width: 290px;
					margin-right: 6px;
					margin-left: 0;
				}
				.sel_inp {
					width: 380px;
					margin-left: 10px;
				}
			}
			footer {
				position: absolute;
				width: 97%;
				height: 50px;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				bottom: 0;
				left: 1%;
			}
			section {
				width: 98%;
				// max-height: 66vh;
				overflow-y: scroll;
				margin: 6px auto;
			}
			section::-webkit-scrollbar {
				width: 0 !important;
			}
			section {
				-ms-overflow-style: none;
			}
			section {
				overflow: -moz-scrollbars-none;
			}
		}
	}
</style>
